<template>
	<view class="container">
		<view class="search">
			<uni-search-bar
				v-model="pagination.value"
				placeholder="请输入搜索内容"
				@confirm="search"
				@cancel="cancel"
				@clear="clear"
			/>
		</view>

		<view class="list-view">
			<uni-list v-for="(item, index) in list" :key="index">
				<uni-list-item 
					:title="item.title"
					:note="item.editor"
					thumb="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png"
					thumb-size="lg"
					:rightText="item.author"
					@click="pageTo(item.id)"
					link
				/>
				<view class="list-item-footer">
					<text>{{ item.id }}</text>
				</view>
				
			</uni-list>
		</view>

		<view class="load-more">
			<uni-load-more :status="status" :content-text="{
				contentdown: '上拉显示更多',
				contentrefresh: '正在加载...',
				contentnomore: '没有更多数据了'
			}" />
		</view>
	</view>
</template>

<script>
import { ref, reactive, onMounted } from 'vue'
import { getDemoPageList } from '@/apis/api'
import uinFun from "@/uilt/uinFun"

export default {
	setup() {
		// 列表数据
		const list = ref([])
		// 加载状态：more-加载前、loading-加载中、noMore-没有更多数据
		const status = ref('more')
		
		// 分页和搜索相关数据
		const pagination = reactive({
			page: 1, // 当前页码
			limit: 15, // 每页显示条数
			total: 0, // 数据总条数
			key: 'title', // 搜索字段
			value: '' // 搜索关键词
		})

		// 加载数据方法
		const loadData = () => {
			getDemoPageList({
				page: pagination.page,
				limit: pagination.limit,
				key: pagination.key,
				value: pagination.value
			}).then(res => {
				// (1)判断是否请求成功
				if (res.code !== 200) {
					uinFun.setModal('错误提示', res.data)
					return false
				}
				// (2)第一页直接赋值，其他页追加数据
				if (pagination.page === 1) {
					list.value = res.data.data
				} else {
					list.value = [...list.value, ...res.data.data]
				}
				pagination.total = res.data.total
				// (3)判断是否还有更多数据
				status.value = res.data.data.length < pagination.limit ? 'noMore' : 'more'
			}).catch(err => {
				uinFun.setModal('错误提示', err)
			})

		}

		// 搜索方法
		const search = (e) => {
			pagination.value = e.value // 设置搜索关键词
			pagination.page = 1 // 重置页码
			loadData() // 重新加载数据
		}

		// 取消搜索
		const cancel = () => {
			pagination.value = '' // 清空搜索关键词
			pagination.page = 1 // 重置页码
			loadData() // 重新加载数据
		}

		// 清空搜索框
		const clear = () => {
			pagination.value = '' // 清空搜索关键词
		}
		// 跳转页面
		const pageTo = (id) => {
			uni.navigateTo({
				url: `/pages/uin/article?id=${id}`
			})
		}
		// 组件挂载后执行
		onMounted(() => {
			loadData() 
			
		})

		// 返回需要暴露的数据和方法
		return {
			list,
			status,
			pagination,
			search,
			cancel, 
			clear,
			loadData,
			pageTo
		}
	},
	// 页面加载时设置标题
	// 监听页面触底事件，加载更多数据
	// 监听下拉刷新事件，重新加载第一页数据
	onLoad(option) {
		uinFun.setBarTitle('list列表')
	},	

	// 监听页面触底事件，加载更多数据
	onReachBottom() {
		if (this.status === 'noMore') return
		
		this.status = 'loading'
		this.pagination.page++
		this.loadData()
	},
	// 监听下拉刷新事件，重新加载第一页数据
	onPullDownRefresh() {
		this.pagination.page = 1
		this.loadData()
		uni.stopPullDownRefresh()
	}
}
</script>

<style>
.container {
	padding: 20rpx;
}

.search {
	margin-bottom: 20rpx;
}

.list-view {
	margin-bottom: 20rpx;
}

.load-more {
	text-align: center;
}
</style>
